<template>
  <starThree v-if="threeShow&&Object.keys(threeConfig).length>0" :type="'page'" :threeProps="threeConfig"></starThree>
</template>

<script>
import starThree from "../three/starThree.vue";
export default {
  name: "d3Chart",
  components:{
    starThree
  },
  directives: {
    svgDrag: {
      // 指令的定义
      inserted: function (el,binding) {
        el.addEventListener('mousedown',(e)=>{
          if(e.ctrlKey){
            return;
          }
          let pos=binding.value.pos;
          if (e.preventDefault) {
            e.preventDefault();
          } else{
            e.returnValue=false;
          };//解决快速拖动滞后问题
          document.onmousemove = function (e) {
            if(binding.value.type==='connect'){
              pos.x1=pos.x1+e.movementX;
              pos.y1=pos.y1+e.movementY;
              pos.x2=pos.x2+e.movementX;
              pos.y2=pos.y2+e.movementY;
            }else{
              pos.x=pos.x+e.movementX;
              pos.y=pos.y+e.movementY;
            }
          }
          document.onmouseup = function () {
            if(binding.value.type==='connect'){
              binding.value.D2[binding.value.type][binding.value.index].x1=pos.x1;
              binding.value.D2[binding.value.type][binding.value.index].y1=pos.y1;
              binding.value.D2[binding.value.type][binding.value.index].x2=pos.x2;
              binding.value.D2[binding.value.type][binding.value.index].y2=pos.y2;
            }else{
              binding.value.D2[binding.value.type][binding.value.index].x=pos.x;
              binding.value.D2[binding.value.type][binding.value.index].y=pos.y;
            }
            document.onmousemove = document.onmouseup = null;
          }
        })
      }
    },
    svgResize:{
      inserted: function (el,binding) {
        el.addEventListener('mousemove',(e)=>{
          let pos = binding.value.pos;
          let {left, top, right, bottom} = el.getBoundingClientRect();
          // if (e.pageX < right && e.pageX > right - 5 && (e.pageY < bottom && e.pageY > bottom - 5)&&!!e.ctrlKey) {
          if (!!e.ctrlKey) {
            el.style.cursor = 'se-resize';
            el.onmousedown = function (e) {
              if (!e.ctrlKey) {
                return;
              }
              let distX = e.pageX;
              let distY = e.pageY;
              let w = right - left;
              let h = bottom - top;
              let ratioX = pos.scaleX;
              let ratioY = pos.scaleY;
              document.onmousemove = function (e) {
                pos.scaleX = ratioX * (w + e.pageX - distX) / w;
                pos.scaleY = ratioY * (h + e.pageY - distY) / h;
              }
              document.onmouseup = function () {
                binding.value.D2[binding.value.type][binding.value.index].scaleX = pos.scaleX;
                binding.value.D2[binding.value.type][binding.value.index].scaleY = pos.scaleY;
                el.style.cursor = 'auto';
                el.onmousedown=el.onmouseup = document.onmousemove = document.onmouseup = null;
              }
            }
          }else{
            el.style.cursor = 'auto';
          }
        })
      }
    }
  },
  data(){
    return {
      threeShow:false,
      threeConfig:{},
      baseline:[],
      lamp:[],
      connect:[],
      text:[],
      signalText:[],
      timer:null,
      dur:null,
      signal:{
        mark1:'red',
        textMark1:'10002'
      }
    }
  },
  props:{
    D3:{
      default:()=>{
        return {}
      }
    },
    elements:{
      default:()=>{
        return []
      }
    },

  },
  watch:{

    D3: {
      handler(newName, oldName) {
        this.threeShow=false;
        this.handleD3List(newName);
        this.$nextTick(()=>{
          this.threeShow=true;
        })
      },
      immediate: true,
      deep: true
    },
    elements:function(elements){
      this.threeShow=false;
      this.handleD3List(this.D3);
      this.$nextTick(()=>{
        this.threeShow=true;
      })
    },
  },
  mounted() {
    this.handleD3List(this.D3)
  },
  methods:{
    async handleD3List(D3){
      let _this=this;
      let threeConfig=this.lodash.cloneDeep(D3);
      if(!D3.element){
        return;
      }
      for(let i=0;i<D3.element.length;i++){
        let item={};
        // await request('twinsInstance/findEntity',D3.element[i].name).then(data=>{
        //   if(!!data.web.D3&&Object.keys(data.web.D3).length>0){
        //     threeConfig['element'][i]['config']=data.web.D3;
        //   }
        // })
        let element=this.elements.find(item=>item.className===D3.element[i].name);
        if(!!element){
          threeConfig['element'][i]['config']=element.web.D3
        }
      };
      this.threeConfig=threeConfig;
    },
  }
}
</script>

<style scoped>

</style>